@num-16: 16px;
@num-20: 20px;
@base-color: #FFF;
@border-base-color: #e8e8e8;
@base-display: "block";
@hover-bg-color: #ECF4F5;
@active-text-color: #448E97;
@base-text-color: #333;
.config-container {
  padding: @num-16;
  height: 100%;
}

.search-container {
  padding: @num-20;
  margin-bottom: @num-16;
  background-color: @base-color;
  border-radius: @num-20 * 0.1;
  :deep(.arco-card-body) {
    padding: @num-16 * 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .arco-col {
      .arco-form-item {
        margin-bottom: @num-16 * 0;
      }
      .arco-form-item-wrapper-col {
        margin-right: @num-20 + 12;
      }
      .arco-form-item-label-col {
        display: none;
      }
    }
  }
}

.search-content {
  display: flex;
  align-items: center;
}

.table-container {
  padding: @num-20;
  background-color: @base-color;
  border-radius: @num-20 * 0.1;
  height: calc(100% - 90px);
  :deep(.arco-card-body) {
    padding: @num-16 * 0;
    height: 100%;
    .table-container{
      padding: 0;
    }
  }
  .operator{
    .separate{
      margin: 0 8px;
      color: #E8E8E8;
    }
  }
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: @num-20;
}

.header-title {
  font-weight: 700;
  font-size: @num-16;
  color: @base-text-color;
}

.action-btn {
  height: @num-20 * 0.9;
  padding: @num-16 * 0;
}

// 标签配置页
/* 左边 */
.label-container {
  padding: @num-16;
  height: 100%;
  display: flex;
  align-items: center;
}

.left-container {
  padding: @num-20;
  border-right: @num-20 * 0.05 solid @border-base-color;
  background-color: @base-color;
  height: 100%;
  .add-btn{
    margin-bottom: @num-16 * 0.5;
    height: @num-20 * 2;
    line-height: @num-20 * 2;
    text-align: center;
    box-sizing: border-box;
    border: @num-20 * 0.05 dashed #D9D9D9;
    background-color: @base-color;
    color: #666;
    font-size: @num-20 * 0.7;
    display: none;
    cursor: pointer;
    .iconfont {
      font-size: @num-20 * 0.6;
      margin-right: @num-20 * 0.2;
    }
  }
}

.left-search {
  display: flex;
  align-items: center;
  margin-bottom: @num-20;
  :deep(.label-form) {
    flex-direction: row;
    .arco-form-item {
      margin-bottom: @num-16 * 0;
      flex-wrap: wrap;
    }
    .arco-form-item-content {
      margin-right: @num-16 * 0.2;
    }
  }
}

.left-list {
  height: calc(100% - @num-16 * 3.25);
  .label-list {
    height: 100%;
    :deep(.arco-scrollbar) {
      height: 100%;
      overflow: auto;
    }
  }
}

.label-list-item {
  padding: 0 @num-20 * 0.6 !important;
  width: 100%;
  height: @num-20 * 2;
  line-height: @num-20 * 2;
  margin-bottom: @num-16 * 0.2;
  border-radius: @num-20 * 0.1;
  user-select: none;
  color: @base-text-color;
  background-color: @base-color;
  :deep(.arco-list-item-content) {
    font-size: @num-20 * 0.7;
    font-style: normal;
    font-weight: @num-20 * 20;
  }
  :deep(.arco-list-item-action) {
    justify-content: center;
    align-items: center;
    .arco-icon-edit {
      width: @num-20;
      height: @num-20;
      stroke: @base-color;
      stroke-width: @num-20 * 0.1;
    }
  }
}

.label-list-item:hover {
  background-color: @hover-bg-color;
  cursor: pointer;
  :deep(.arco-list-item-action) {
    .arco-icon-edit {
      stroke: @active-text-color !important;
    }
  }
}

.label-list-item.active {
  background-color: @hover-bg-color;
  color: @active-text-color;
}

/* 右边 */
.right-container {
  padding: @num-20;
  background-color: @base-color;
  width: 100%;
  height: 100%;
}

.other-header {
  margin-bottom: @num-20 * 0.7;
}

.table-action {
  display: flex;
  align-items: center;
  justify-content: center;
  :deep(.arco-form) {
    width: 100%;
    margin-right: @num-20;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  :deep(.arco-form-item) {
    margin-bottom: @num-16 * 0;
    .arco-form-item-label-col {
      display: none;
      padding: @num-16 * 0;
    }
    .arco-form-item-content {
      margin-right: @num-20 * 0.6;
    }
  }
}

.other-table {
  padding: @num-20 * 0;
  :deep(.arco-table) {
    height: 100%;
    tbody {
      height: 100%;
      min-height: 100%;
    }
    .arco-spin-loading{
      .arco-spin-mask{
        background-color: white;
      }
    }
  }
}
